<template>
  <Grid :col="4" :border="false" padding="5px">
    <GridItem><Input placeholder="请输入资源名" v-model="search.resourceName"/></GridItem>
    <GridItem><Input placeholder="请输入资源关键字" v-model="search.keywords"/></GridItem>

    <GridItem>
      <DatePicker type="daterange" confirm placement="bottom-end" v-model="datetimes" placeholder="请选择上传时间"
                  style="width: 100%;"/>
    </GridItem>
    <GridItem>
      <Button icon="md-search" type="primary" @click="handleSearch">查询</Button>
    </GridItem>
  </Grid>
</template>

<script setup>
import {ref, reactive, computed} from 'vue' ;
// 接收传入的参数
const {modelValue} = defineProps({
  modelValue: {
    type: Object, required: true
  }
});
// 定义事件
const emits = defineEmits(["update:model-value", "search-click"]);

// 定义响应式数据
const search = reactive({...modelValue, start: "", end: ""});

const datetimes = computed({
  set(array) {
    search.start = formatDate(array[0]);
    search.end = formatDate(array[1]);
  },
  get() {
    return [search.start ?? "", search.end ?? ""]
  }
});

function formatDate(date) {
  if (date == "") return null;
  let year = date.getFullYear();
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
  let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  return `${year}-${month}-${day}`;
}

function handleSearch() {
  let searchText = Object.keys(search).reduce((map, key) => {
     if (search[key] != null && search[key] != "") {
       map[key] = search[key] ;
     }
     return map ;
  } , {}) ;
  console.log(searchText) ;
  emits("update:model-value", searchText);
  emits("search-click");
}

</script>